<template>
	<div class="about">
		<h1 class="a1">路由</h1>
		<el-container>
			<el-aside width="200px">
				<el-menu default-active="/" class="el-menu-vertical-demo" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" @select="onSelect">
					<el-menu-item>
						<i class="el-icon-menu"></i>
						<span slot="title">会员列表</span>
					</el-menu-item>
					<el-menu-item>
						<i class="el-icon-document"></i>
						<span slot="title">会员等级</span>
					</el-menu-item>
				</el-menu>
			</el-aside>
			<el-main><router-view></router-view></el-main>
		</el-container>
	</div>
</template>

<script>
export default {
	data() {
		return {};
	},
	mounted(index) {
		this.$router.push(index);
	},
	methods: {
		onSelect(index, indexPath) {
			console.log(index, indexPath);
			this.$router.push(index);
		}
	}
};
</script>

<style lang="scss" scoped>
.el-aside {
	background-color: #d3dce6;
	color: #333;
	line-height: 100vh;
	height: 100vh;

	.el-menu {
		height: 100vh;
	}
}

.el-main {
	background-color: #e9eef3;
	color: #333;
	text-align: center;
	line-height: 160px;
}
.a1 {
	margin-left: 600px;
}
</style>
